import React, { useEffect, useState } from 'react'
import { Button, Drawer, message } from 'antd';
import axios from 'axios';
import './css/App.scss'
export default function List() {
  const [messageApi, contextHolder] = message.useMessage();
  const success = () => {
    messageApi.open({
      type: 'success',
      content: '删除成功',
    });
  };
  let [data, setData] = React.useState([])
  let [arr, setArr] = React.useState({})
  useEffect(() => {
    getData()
  }, [])
  let getData = async () => {
    let { data: { data } } = await axios.get('http://localhost:3000/getArticle')
    setData(data)
  }

  const [open, setOpen] = useState(false);
  const showDrawer = (i) => {
    setArr(i);
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  let del = async (id) => {
    await axios.get('http://localhost:3000/del?id=' + id)
    getData()
    success()
  }
  return (
    <div>
      {contextHolder}
      {data.map((i, j) => (
        <div className="boox" key={j}>
          <div className="left">
            <img src={i.img} alt="" />
          </div>
          <div className="right">
            <p>{i.title}</p>
            <Button type="primary" size='large' className='btn1' onClick={() => { showDrawer(i) }}>
              查看数据
            </Button>
            <Button type="primary" size='large' className='btn1' onClick={() => { del(i._id) }}>
              删除
            </Button>
          </div>
        </div>
      ))}
      <Drawer title={arr.title} onClose={onClose} open={open}>
        <img src={arr.img} alt="" style={{width: '100%', height: '100px',border:"2px solid gray"}}/> 
        <p>展现量：{arr.z}</p>
        <p>阅读量：{arr.y}</p>
        <p>评论量:{arr.p}</p>
        <p>收藏量:{arr.s}</p>
      </Drawer>
    </div>
  )
}
